在之前寫的[蚊子的Day10]頁面導覽Navigator-Stack Navigation～React Native這篇文章中有提到使用Stack Navigator實現頁面切換的方法，而今天則是來講Tab Navigator這部分。

Stack Navigator只能提供兩個頁面之間切換的功能，要在多個頁面之間切換則是需要Tab Navigator與Drawer Navigator。

在做Tab的UI設計時有一點要注意就是圖示數量最好是在2～5個之間，如果項目超過5個則改用Drawer使用者體驗會較佳。

現在開始來製作我的App的tab bar～

安裝套件

首先，先來安裝Tab的套件，呼叫出VScode的控制台後輸入：

npm install -- save @react-navigation/bottom-tabs

開始使用

將tab的製作元件以及預先做好的畫面都import進App.js檔案裡。

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import { HomeStack, LocationStack, ContactStack, RankStack, LoginScreen } from '../screens';

const Tab = createBottomTabNavigator();
const App = () => {
return (
<NavigationContainer>
    <Tab.Navigator>
          <Tab.Screen name="首頁" component={HomeStack}/>
          <Tab.Screen name="地點篇" component={LocationStack}/>
          <Tab.Screen name="資訊聯絡篇" component={ContactStack}/>
          <Tab.Screen name="排行榜" component={RankStack} />
          <Tab.Screen name="login" component={LoginScreen} />
    </Tab.Navigator>
</NavigationContainer>
  );
};
export default App;

這樣就完成最陽春的Tab bar製作，下篇將會繼續講解如何加入一些參數讓Tab bar改變樣式～